CSS പേജ് റൂൾ: ആഗോള ഉപയോക്താക്കൾക്കായി പ്രിന്റ് സ്റ്റൈൽഷീറ്റ് കസ്റ്റമൈസേഷനും നിയന്ത്രണവും

ഇന്നത്തെ ഡിജിറ്റൽ ലോകത്ത്, പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകളുടെ പ്രാധാന്യം അവഗണിക്കാൻ എളുപ്പമാണ്. എന്നിരുന്നാലും, നിങ്ങളുടെ വെബ് ഉള്ളടക്കത്തിന്റെ നന്നായി ഫോർമാറ്റ് ചെയ്തതും ഒപ്റ്റിമൈസ് ചെയ്തതുമായ ഒരു പ്രിന്റ് പതിപ്പ് നൽകുന്നത് അക്സെസ്സിബിലിറ്റി, ആർക്കൈവിംഗ്, ഓഫ്‌ലൈൻ വായന എന്നിവയ്ക്ക് നിർണ്ണായകമാണ്. CSS @page റൂൾ, പ്രിന്റ് ചെയ്യുമ്പോൾ നിങ്ങളുടെ വെബ് പേജുകളുടെ രൂപഭംഗി നിയന്ത്രിക്കാനും ഇഷ്ടാനുസൃതമാക്കാനും നിങ്ങളെ പ്രാപ്തരാക്കുന്നു, ഇത് ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് തടസ്സമില്ലാത്തതും പ്രൊഫഷണലുമായ അനുഭവം ഉറപ്പാക്കുന്നു. ഈ സമഗ്രമായ ഗൈഡ് @page റൂളിന്റെ സങ്കീർണ്ണതകളെക്കുറിച്ചും ഫലപ്രദമായ പ്രിന്റ് സ്റ്റൈൽഷീറ്റ് കസ്റ്റമൈസേഷനായി ഇത് എങ്ങനെ പ്രയോജനപ്പെടുത്താമെന്നും പര്യവേക്ഷണം ചെയ്യും.

ഡിജിറ്റൽ യുഗത്തിൽ പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾക്ക് എന്തുകൊണ്ട് പ്രാധാന്യമുണ്ട്

ഇന്റർനെറ്റ് പ്രധാനമായും ഒരു വിഷ്വൽ മീഡിയം ആണെങ്കിലും, അച്ചടിച്ച രേഖകളുടെ ആവശ്യകത പല കാരണങ്ങളാൽ നിലനിൽക്കുന്നു:

• അക്സെസ്സിബിലിറ്റി: കാഴ്ച വൈകല്യമുള്ള ഉപയോക്താക്കൾ അച്ചടിച്ച ഉള്ളടക്കം വായിക്കാനോ അല്ലെങ്കിൽ അച്ചടിച്ച രേഖകളിൽ നന്നായി പ്രവർത്തിക്കുന്ന സഹായക സാങ്കേതികവിദ്യകൾ ഉപയോഗിക്കാനോ താൽപ്പര്യപ്പെട്ടേക്കാം.
• ആർക്കൈവിംഗ്: അച്ചടിച്ച പകർപ്പുകൾ ഒരു സ്ഥിരം രേഖയായി വർത്തിക്കുന്നു, വെബ്സൈറ്റ് അപ്ഡേറ്റുകളോ ഡാറ്റാ നഷ്ടമോ ഇതിനെ ബാധിക്കുകയില്ല.
• ഓഫ്‌ലൈൻ വായന: ഉപയോക്താക്കൾക്ക് ദൈർഘ്യമേറിയ ലേഖനങ്ങളോ റിപ്പോർട്ടുകളോ ഓഫ്‌ലൈനായി വായിക്കാൻ താൽപ്പര്യമുണ്ടാകാം, പ്രത്യേകിച്ച് ഇന്റർനെറ്റ് കണക്റ്റിവിറ്റി കുറഞ്ഞ പ്രദേശങ്ങളിൽ. വിദൂര സ്ഥലങ്ങളിലുള്ള ഗവേഷകരെയോ അല്ലെങ്കിൽ വിശ്വസനീയമായ ആക്സസ് ഇല്ലാത്ത യാത്രക്കാരെയോ പരിഗണിക്കുക.
• ഔദ്യോഗിക രേഖകൾ: പല വ്യവസായങ്ങളും കരാറുകൾ, ഇൻവോയ്സുകൾ, നിയമപരമായ രേഖകൾ എന്നിവയ്ക്കായി ഇപ്പോഴും അച്ചടിച്ച രേഖകളെ ആശ്രയിക്കുന്നു.
• ഉപയോക്താവിന്റെ താല്പര്യം: ചില ഉപയോക്താക്കൾ അച്ചടിച്ച മെറ്റീരിയൽ വായിക്കുന്നതിന്റെ സ്പർശനപരമായ അനുഭവം ഇഷ്ടപ്പെടുന്നു.

അതിനാൽ, പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ അവഗണിക്കുന്നത് മോശം ഉപയോക്തൃ അനുഭവത്തിനും നിങ്ങളുടെ പ്രേക്ഷകരിൽ ഒരു പ്രധാന ഭാഗത്തെ ഒഴിവാക്കുന്നതിനും ഇടയാക്കും. നന്നായി രൂപകൽപ്പന ചെയ്ത പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ സൃഷ്ടിക്കുന്നതിൽ സമയം നിക്ഷേപിക്കുന്നത് അക്സെസ്സിബിലിറ്റിക്കും പ്രൊഫഷണലിസത്തിനും ഉള്ള പ്രതിബദ്ധത പ്രകടമാക്കുന്നു.

CSS @page റൂൾ മനസ്സിലാക്കാം

CSS-ലെ @page റൂൾ അച്ചടിച്ച പേജുകൾക്കായി പ്രത്യേകമായി സ്റ്റൈലുകൾ നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. മാർജിനുകൾ, പേജ് വലുപ്പം, ഹെഡറുകൾ, ഫൂട്ടറുകൾ എന്നിവ പോലുള്ള അച്ചടിച്ച ഔട്ട്പുട്ടിന്റെ വിവിധ വശങ്ങളിൽ ഇത് നിയന്ത്രണം നൽകുന്നു. സ്ക്രീനിൽ പ്രയോഗിക്കുന്ന സാധാരണ CSS റൂളുകളിൽ നിന്ന് വ്യത്യസ്തമായി, @page റൂൾ പ്രിന്റ് മീഡിയത്തിനായി പ്രത്യേകം രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്.

സിന്റാക്സ്

@page റൂളിന്റെ അടിസ്ഥാന സിന്റാക്സ് താഴെ പറയുന്നവയാണ്:

            @page {
 /* CSS declarations for print styles */
}

            

              
                Copy
              
            
          

ആദ്യ പേജ് അല്ലെങ്കിൽ ഇടത്/വലത് പേജുകൾ പോലുള്ള നിർദ്ദിഷ്ട പേജുകളെ ലക്ഷ്യമിടുന്നതിന് നിങ്ങൾക്ക് ഒരു സെലക്ടറും വ്യക്തമാക്കാം:

            @page :first {
 /* Styles for the first page */
}

@page :left {
 /* Styles for left pages */
}

@page :right {
 /* Styles for right pages */
}

            

              
                Copy
              
            
          

പുസ്തകത്തിലോ മാഗസിൻ-സ്റ്റൈൽ പ്രിന്റൗട്ടിലോ അഭിമുഖീകരിക്കുന്ന പേജുകൾക്കായി വ്യത്യസ്ത ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിന് :left, :right സെലക്ടറുകൾ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

@page-നോടൊപ്പം ഉപയോഗിക്കുന്ന സാധാരണ പ്രോപ്പർട്ടികൾ

@page റൂളുമായി പ്രവർത്തിക്കുമ്പോൾ നിരവധി CSS പ്രോപ്പർട്ടികൾ പ്രത്യേകിച്ചും പ്രസക്തമാണ്:

• size: പേജിന്റെ വലുപ്പം വ്യക്തമാക്കുന്നു. സാധാരണ മൂല്യങ്ങളിൽ A4, letter, legal, landscape എന്നിവ ഉൾപ്പെടുന്നു.
• margin: പേജ് ഉള്ളടക്കത്തിന് ചുറ്റുമുള്ള മാർജിനുകൾ സജ്ജമാക്കുന്നു. മുകൾ, വലത്, താഴെ, ഇടത് ഭാഗങ്ങൾക്കായി നിങ്ങൾക്ക് വ്യത്യസ്ത മാർജിനുകൾ വ്യക്തമാക്കാൻ കഴിയും.
• margin-top, margin-right, margin-bottom, margin-left: സൂക്ഷ്മമായ നിയന്ത്രണത്തിനായി ഓരോ മാർജിൻ പ്രോപ്പർട്ടികളും വെവ്വേറെ.
• padding: മാർജിനുകൾക്കുള്ളിലെ ഉള്ളടക്കത്തിന് ചുറ്റുമുള്ള പാഡിംഗ് നിർവചിക്കുന്നു (മാർജിനുകളേക്കാൾ കുറവായി ഉപയോഗിക്കുന്നു).
• orphans: ഒരു പേജിന്റെ താഴെ ഒരു ഖണ്ഡികയിലെ എത്ര വരികളെങ്കിലും ഉണ്ടായിരിക്കണമെന്ന് വ്യക്തമാക്കുന്നു. ഓർഫൻഡ് ലൈനുകൾ തടയാൻ സഹായിക്കുന്നു.
• widows: ഒരു പേജിന്റെ മുകളിൽ ഒരു ഖണ്ഡികയിലെ എത്ര വരികളെങ്കിലും ഉണ്ടായിരിക്കണമെന്ന് വ്യക്തമാക്കുന്നു. വിഡോഡ് ലൈനുകൾ തടയുന്നു.
• marks: അച്ചടിച്ച പേജിൽ ക്രോപ്പ് മാർക്കുകളോ രജിസ്ട്രേഷൻ മാർക്കുകളോ ചേർക്കുന്നു (പ്രൊഫഷണൽ പ്രിന്റിംഗിന് ഉപയോഗപ്രദം).

ഒരു അടിസ്ഥാന പ്രിന്റ് സ്റ്റൈൽഷീറ്റ് ഉണ്ടാക്കുന്നു

ഒരു പ്രിന്റ് സ്റ്റൈൽഷീറ്റ് ഉണ്ടാക്കുന്നതിനുള്ള ആദ്യപടി അത് നിങ്ങളുടെ HTML ഡോക്യുമെന്റുമായി ലിങ്ക് ചെയ്യുക എന്നതാണ്. media ആട്രിബ്യൂട്ട് "print" എന്ന് സജ്ജീകരിച്ച് <link> ടാഗ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും:

            <link rel="stylesheet" href="print.css" media="print">

            

              
                Copy
              
            
          

പേജ് പ്രിന്റ് ചെയ്യുമ്പോൾ മാത്രം സ്റ്റൈൽഷീറ്റ് പ്രയോഗിക്കുമെന്ന് ഇത് ഉറപ്പാക്കുന്നു. പകരമായി, നിങ്ങളുടെ നിലവിലുള്ള CSS ഫയലിനുള്ളിൽ ഒരു മീഡിയ ക്വറി ഉപയോഗിക്കാം:

            @media print {
 /* CSS rules for print styles */
}

            

              
                Copy
              
            
          

ഈ സമീപനം നിങ്ങളുടെ പ്രിന്റ് സ്റ്റൈലുകളെ നിങ്ങളുടെ സ്ക്രീൻ സ്റ്റൈലുകൾക്കൊപ്പം ഒരേ ഫയലിൽ സൂക്ഷിക്കുന്നു, പക്ഷേ ഇത് ഫയൽ കൈകാര്യം ചെയ്യുന്നത് കൂടുതൽ ബുദ്ധിമുട്ടാക്കും. വലിയ പ്രോജക്റ്റുകൾക്കായി ഒരു പ്രത്യേക print.css ഫയൽ ഉപയോഗിക്കുന്നത് പൊതുവെ ശുപാർശ ചെയ്യുന്നു.

ഉദാഹരണം: ഒരു ലളിതമായ പ്രിന്റ് സ്റ്റൈൽഷീറ്റ്

പേജ് വലുപ്പം A4 ആയി സജ്ജീകരിക്കുകയും മാർജിനുകൾ ക്രമീകരിക്കുകയും നാവിഗേഷൻ ഘടകങ്ങൾ മറയ്ക്കുകയും ചെയ്യുന്ന ഒരു print.css ഫയലിന്റെ അടിസ്ഥാന ഉദാഹരണം ഇതാ:

            @page {
 size: A4;
 margin: 2cm;
}

nav, aside, header, footer {
 display: none;
}

body {
 font-family: sans-serif;
 font-size: 12pt;
 line-height: 1.5;
}

a {
 color: black !important; /* Override screen styles */
 text-decoration: none !important;
}

            

              
                Copy
              
            
          

ഈ സ്റ്റൈൽഷീറ്റ് നാവിഗേഷൻ മെനുകളും ഫൂട്ടറുകളും പോലുള്ള അച്ചടിച്ച ഉള്ളടക്കത്തിന് പ്രസക്തമല്ലാത്ത ഘടകങ്ങളെ മറയ്ക്കുന്നു. ഇത് വായനാക്ഷമതയ്ക്കായി ഒരു അടിസ്ഥാന ഫോണ്ടും ലൈൻ-ഹൈറ്റും സജ്ജമാക്കുന്നു. സ്ക്രീൻ ഡിസ്പ്ലേയ്ക്കായി നിർവചിച്ചേക്കാവുന്ന സ്റ്റൈലുകളെ മറികടക്കാൻ !important ഫ്ലാഗ് ഉപയോഗിക്കുന്നു.

നൂതന പ്രിന്റ് സ്റ്റൈൽഷീറ്റ് കസ്റ്റമൈസേഷൻ

അടിസ്ഥാന സ്റ്റൈലിംഗിനപ്പുറം, @page റൂളും പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകളും നിരവധി നൂതന കസ്റ്റമൈസേഷൻ ഓപ്ഷനുകൾ വാഗ്ദാനം ചെയ്യുന്നു.

പേജ് ബ്രേക്കുകൾ

നന്നായി ഫോർമാറ്റ് ചെയ്ത അച്ചടിച്ച രേഖകൾ ഉണ്ടാക്കുന്നതിന് പേജ് ബ്രേക്കുകൾ നിയന്ത്രിക്കുന്നത് അത്യാവശ്യമാണ്. പേജ് ബ്രേക്കുകൾ കൈകാര്യം ചെയ്യുന്നതിനായി CSS നിരവധി പ്രോപ്പർട്ടികൾ നൽകുന്നു:

• page-break-before: ഒരു ഘടകത്തിന് മുമ്പ് ഒരു പേജ് ബ്രേക്ക് സംഭവിക്കണമോ എന്ന് വ്യക്തമാക്കുന്നു. മൂല്യങ്ങളിൽ auto, always, avoid, left, right എന്നിവ ഉൾപ്പെടുന്നു.
• page-break-after: ഒരു ഘടകത്തിന് ശേഷം ഒരു പേജ് ബ്രേക്ക് സംഭവിക്കണമോ എന്ന് വ്യക്തമാക്കുന്നു. മൂല്യങ്ങൾ page-break-before-ന് തുല്യമാണ്.
• page-break-inside: ഒരു ഘടകത്തിനുള്ളിൽ പേജ് ബ്രേക്ക് അനുവദനീയമാണോ എന്ന് വ്യക്തമാക്കുന്നു. മൂല്യങ്ങളിൽ auto, avoid എന്നിവ ഉൾപ്പെടുന്നു.

ഉദാഹരണത്തിന്, തലക്കെട്ടുകൾക്ക് ശേഷം എല്ലായ്പ്പോഴും അവയുടെ ഉള്ളടക്കം വരുന്നുവെന്ന് ഉറപ്പാക്കാൻ, നിങ്ങൾക്ക് താഴെ പറയുന്ന CSS ഉപയോഗിക്കാം:

            h2, h3 {
 page-break-after: avoid;
}

p {
 page-break-inside: avoid;
}

            

              
                Copy
              
            
          

ഇത് തലക്കെട്ടുകൾ ഒരു പേജിന്റെ താഴെ ഒറ്റപ്പെട്ടുപോകുന്നതും ഖണ്ഡികകൾ പേജുകൾക്കിടയിൽ അസുഖകരമായി വിഭജിക്കപ്പെടുന്നതും തടയുന്നു. page-break-inside: avoid അമിതമായി ഉപയോഗിക്കുന്നത് ശ്രദ്ധിക്കുക, കാരണം ഇത് പേജിലെ സ്ഥലം ശരിയായി ഉപയോഗിക്കാതിരിക്കുന്നതിനും ഇടവേളകളില്ലാതെ ഉള്ളടക്കം നീണ്ടുപോകുന്നതിനും കാരണമായേക്കാം. ഒരു ബാലൻസ് കണ്ടെത്തേണ്ടതുണ്ട്.

::before, ::after എന്നിവ ഉപയോഗിച്ച് ഉള്ളടക്കം സൃഷ്ടിക്കുന്നു

::before, ::after എന്നീ സ്യൂഡോ-എലമെന്റുകൾ പ്രിന്റ് മീഡിയത്തിന് മാത്രമായുള്ള ഉള്ളടക്കം സൃഷ്ടിക്കാൻ ഉപയോഗിക്കാം. പേജ് നമ്പറുകൾ, ഡോക്യുമെന്റ് ശീർഷകങ്ങൾ, അല്ലെങ്കിൽ വാട്ടർമാർക്കുകൾ എന്നിവ ചേർക്കുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

ഓരോ പേജിന്റെയും അടിക്കുറിപ്പിൽ പേജ് നമ്പറുകൾ ചേർക്കാൻ, നിങ്ങൾക്ക് താഴെ പറയുന്ന CSS ഉപയോഗിക്കാം:

            @page {
 @bottom-right {
 content: "Page " counter(page) " of " counter(pages);
 }
}

            

              
                Copy
              
            
          

ഈ കോഡ് നിലവിലെ പേജ് നമ്പറും ആകെ പേജുകളുടെ എണ്ണവും പ്രദർശിപ്പിക്കാൻ counter() ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നു. @bottom-right അറ്റ്-റൂൾ ഉള്ളടക്കത്തെ പേജിന്റെ താഴെ വലത് കോണിൽ സ്ഥാപിക്കുന്നു. അതുപോലെ, പേജിന്റെ മറ്റ് ഭാഗങ്ങളിൽ ഉള്ളടക്കം സ്ഥാപിക്കുന്നതിന് നിങ്ങൾക്ക് @top-left, @top-right, @bottom-left, @top-center, @bottom-center എന്നിവ ഉപയോഗിക്കാം.

കൂടുതൽ സങ്കീർണ്ണമായ ലേഔട്ടുകൾക്കായി, നിങ്ങൾക്ക് അബ്സൊല്യൂട്ട് പൊസിഷനിംഗിന്റെയും ജനറേറ്റഡ് ഉള്ളടക്കത്തിന്റെയും ഒരു സംയോജനം ഉപയോഗിക്കേണ്ടി വന്നേക്കാം. ഉദാഹരണത്തിന്, ഓരോ പേജിലും ഒരു വാട്ടർമാർക്ക് ചേർക്കാൻ, നിങ്ങൾക്ക് താഴെ പറയുന്ന CSS ഉപയോഗിക്കാം:

            body::before {
 content: "CONFIDENTIAL";
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(-45deg);
 font-size: 5em;
 color: #ccc;
 z-index: -1;
 pointer-events: none; /* Avoid interfering with interactions */
}

            

              
                Copy
              
            
          

ഇത് പേജിന്റെ മധ്യത്തിൽ ഒരു കോണിൽ തിരിച്ച് വെച്ച ഒരു വാട്ടർമാർക്ക് സൃഷ്ടിക്കുന്നു. z-index പ്രോപ്പർട്ടി വാട്ടർമാർക്ക് ഉള്ളടക്കത്തിന് പിന്നിലാണെന്ന് ഉറപ്പാക്കുന്നു, കൂടാതെ pointer-events: none പ്രോപ്പർട്ടി ഉപയോക്തൃ ഇടപെടലുകളിൽ നിന്ന് അതിനെ തടയുന്നു.

ചിത്രങ്ങളും ഗ്രാഫിക്സും കൈകാര്യം ചെയ്യൽ

പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ ഉണ്ടാക്കുമ്പോൾ, ചിത്രങ്ങളും ഗ്രാഫിക്സും എങ്ങനെ കൈകാര്യം ചെയ്യപ്പെടുമെന്ന് പരിഗണിക്കേണ്ടത് പ്രധാനമാണ്. പ്രിന്റിംഗിനായി അവയെ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് അവയുടെ വലുപ്പം, റെസല്യൂഷൻ, അല്ലെങ്കിൽ ദൃശ്യപരത എന്നിവ ക്രമീകരിക്കേണ്ടി വന്നേക്കാം.

ഉദാഹരണത്തിന്, വലിയ ചിത്രങ്ങളുടെ വലുപ്പം കുറയ്ക്കുന്നതിന്, നിങ്ങൾക്ക് max-width പ്രോപ്പർട്ടി ഉപയോഗിക്കാം:

            img {
 max-width: 100%;
 height: auto;
}

            

              
                Copy
              
            
          

ഇത് ചിത്രങ്ങൾ പേജിന്റെ അതിരുകൾ കവിയുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു. പ്രിന്റിംഗിൽ ചിത്രങ്ങൾ വ്യക്തവും തെളിഞ്ഞതുമായി കാണുന്നതിന് ഉയർന്ന റെസല്യൂഷനുള്ള ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നതും നിങ്ങൾക്ക് പരിഗണിക്കാവുന്നതാണ്.

ചില സന്ദർഭങ്ങളിൽ, ചില ചിത്രങ്ങളോ ഗ്രാഫിക്സുകളോ പൂർണ്ണമായും മറയ്ക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. ഉദാഹരണത്തിന്, ഉള്ളടക്കത്തിന് അത്യന്താപേക്ഷിതമല്ലാത്ത അലങ്കാര ചിത്രങ്ങൾ display: none പ്രോപ്പർട്ടി ഉപയോഗിച്ച് മറയ്ക്കാവുന്നതാണ്:

            .decorative-image {
 display: none;
}

            

              
                Copy
              
            
          

പ്രിന്റിനായി ടേബിളുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക

ടേബിളുകൾ പ്രിന്റിനായി ഫോർമാറ്റ് ചെയ്യുന്നത് പ്രത്യേകിച്ചും വെല്ലുവിളി നിറഞ്ഞതാണ്. ടേബിളുകൾ വായിക്കാൻ കഴിയുന്നതും പേജിന്റെ അതിരുകൾക്കുള്ളിൽ ഒതുങ്ങുന്നതുമാണെന്ന് ഉറപ്പാക്കാൻ കോളം വീതി, ഫോണ്ട് വലുപ്പങ്ങൾ, പേജ് ബ്രേക്കുകൾ എന്നിവ ക്രമീകരിക്കേണ്ടി വന്നേക്കാം.

ടേബിളുകൾ പേജുകൾക്കിടയിൽ വിഭജിക്കപ്പെടാതിരിക്കാൻ, നിങ്ങൾക്ക് table-layout: fixed പ്രോപ്പർട്ടി ഉപയോഗിക്കാം:

            table {
 table-layout: fixed;
 width: 100%;
}

            

              
                Copy
              
            
          

ഇത് ടേബിളിനെ ഒരു ഫിക്സഡ് ലേഔട്ട് ഉപയോഗിക്കാൻ പ്രേരിപ്പിക്കുന്നു, ഇത് പേജിന്റെ അതിരുകൾ കവിയുന്നത് തടയാൻ സഹായിക്കും. എല്ലാ കോളങ്ങളും ദൃശ്യമാണെന്ന് ഉറപ്പാക്കാൻ കോളം വീതി ക്രമീകരിക്കേണ്ടിയും വന്നേക്കാം.

നീണ്ട ടേബിളുകൾക്കായി, ഓരോ പേജിലും ടേബിൾ ഹെഡറും ഫൂട്ടറും ആവർത്തിക്കുന്നതിന് നിങ്ങൾക്ക് thead, tfoot ഘടകങ്ങൾ ഉപയോഗിക്കാം:

            thead {
 display: table-header-group;
}

tfoot {
 display: table-footer-group;
}

            

              
                Copy
              
            
          

ഇത് വായനക്കാർക്ക് ടേബിൾ ഉള്ളടക്കം ഒന്നിലധികം പേജുകളിലായി വ്യാപിച്ചാലും മനസ്സിലാക്കാൻ എളുപ്പമാക്കുന്നു.

പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾക്കുള്ള ആഗോള പരിഗണനകൾ

ഒരു ആഗോള പ്രേക്ഷകർക്കായി പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ രൂപകൽപ്പന ചെയ്യുമ്പോൾ, സാംസ്കാരിക വ്യത്യാസങ്ങളും ഭാഷാ വ്യതിയാനങ്ങളും പരിഗണിക്കേണ്ടത് പ്രധാനമാണ്. ചില പ്രധാന പരിഗണനകൾ ഇതാ:

• പേപ്പർ വലുപ്പങ്ങൾ: വിവിധ പ്രദേശങ്ങൾ വ്യത്യസ്ത പേപ്പർ വലുപ്പങ്ങൾ ഉപയോഗിക്കുന്നു. യൂറോപ്പിലും ഏഷ്യയിലും A4 സാധാരണമാണെങ്കിലും, വടക്കേ അമേരിക്കയിൽ ലെറ്റർ വലുപ്പം സാധാരണമാണ്. ഓപ്ഷനുകൾ നൽകുകയോ അല്ലെങ്കിൽ രണ്ടിനും അനുയോജ്യമായ രീതിയിൽ നിങ്ങളുടെ ഡിസൈൻ ക്രമീകരിക്കുകയോ ചെയ്യുക. നിർദ്ദിഷ്ട പേപ്പർ വലുപ്പങ്ങളെ ലക്ഷ്യമിടാൻ നിങ്ങൾക്ക് CSS മീഡിയ ക്വറികൾ ഉപയോഗിക്കാം.
• തീയതി, നമ്പർ ഫോർമാറ്റുകൾ: തീയതികളും നമ്പറുകളും പ്രാദേശിക സമ്പ്രദായങ്ങൾക്കനുസരിച്ച് ഫോർമാറ്റ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, അമേരിക്കയിൽ തീയതികൾ സാധാരണയായി MM/DD/YYYY ഫോർമാറ്റിലാണ്, അതേസമയം യൂറോപ്പിൽ DD/MM/YYYY സാധാരണമാണ്. അതുപോലെ, ദശാംശ വിഭജന ചിഹ്നത്തിന്റെയും ആയിരങ്ങളുടെ വിഭജന ചിഹ്നത്തിന്റെയും കാര്യത്തിൽ നമ്പർ ഫോർമാറ്റുകൾ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു. ഉപയോക്താവിന്റെ ലൊക്കേൽ അടിസ്ഥാനമാക്കി ഈ ഘടകങ്ങൾ ഡൈനാമിക് ആയി ഫോർമാറ്റ് ചെയ്യുന്നതിന് JavaScript ലൈബ്രറികൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• ടൈപ്പോഗ്രാഫി: വൈവിധ്യമാർന്ന അക്ഷരങ്ങളെയും ഭാഷകളെയും പിന്തുണയ്ക്കുന്ന ഫോണ്ടുകൾ തിരഞ്ഞെടുക്കുക. അച്ചടിച്ച രേഖയിൽ ഉൾച്ചേർക്കാൻ കഴിയുന്ന വെബ് ഫോണ്ടുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. എന്നിരുന്നാലും, ലൈസൻസിംഗ് നിയന്ത്രണങ്ങളും ഫയൽ വലുപ്പങ്ങളും ശ്രദ്ധിക്കുക. നോട്ടോ സാൻസ്, റോബോട്ടോ പോലുള്ള ഓപ്പൺ സോഴ്സ് ഫോണ്ടുകൾ ഇന്റർനാഷണലൈസേഷന് നല്ല തിരഞ്ഞെടുപ്പുകളാണ്.
• വലത്തുനിന്ന്-ഇടത്തോട്ടുള്ള ഭാഷകൾ: നിങ്ങളുടെ വെബ്സൈറ്റ് അറബിക് അല്ലെങ്കിൽ ഹീബ്രു പോലുള്ള വലത്തുനിന്ന്-ഇടത്തോട്ടുള്ള ഭാഷകളെ പിന്തുണയ്ക്കുന്നുവെങ്കിൽ, നിങ്ങളുടെ പ്രിന്റ് സ്റ്റൈൽഷീറ്റ് ടെക്സ്റ്റ് ദിശ ശരിയായി കൈകാര്യം ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. ടെക്സ്റ്റ് ദിശ നിയന്ത്രിക്കുന്നതിന് direction, unicode-bidi പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുക.
• അക്സെസ്സിബിലിറ്റി: നിങ്ങളുടെ അച്ചടിച്ച രേഖകൾ വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് പ്രാപ്യമാണെന്ന് ഉറപ്പാക്കാൻ അക്സെസ്സിബിലിറ്റി മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിക്കുക. ഉചിതമായ ഫോണ്ട് വലുപ്പങ്ങൾ, വർണ്ണ കോൺട്രാസ്റ്റുകൾ, ചിത്രങ്ങൾക്ക് ആൾട്ടർനേറ്റീവ് ടെക്സ്റ്റ് എന്നിവ ഉപയോഗിക്കുക.
• വിവർത്തനം: നിങ്ങളുടെ വെബ്സൈറ്റ് ഒന്നിലധികം ഭാഷകളിൽ ലഭ്യമാണെങ്കിൽ, നിങ്ങളുടെ പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകളുടെ വിവർത്തനം ചെയ്ത പതിപ്പുകൾ നൽകുക. ഇത് അച്ചടിച്ച ഉള്ളടക്കം വെബ്സൈറ്റിന്റെ ഭാഷയുമായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം: വ്യത്യസ്ത പേപ്പർ വലുപ്പങ്ങൾ കൈകാര്യം ചെയ്യൽ

പേപ്പറിന്റെ വലുപ്പത്തിനനുസരിച്ച് വ്യത്യസ്ത സ്റ്റൈലുകൾ പ്രയോഗിക്കാൻ നിങ്ങൾക്ക് CSS മീഡിയ ക്വറികൾ ഉപയോഗിക്കാം:

            @media print and (size: A4) {
 /* Styles for A4 paper */
 margin: 2cm;
}

@media print and (size: letter) {
 /* Styles for letter paper */
 margin: 1in;
}

            

              
                Copy
              
            
          

നിർദ്ദിഷ്ട പേപ്പർ വലുപ്പത്തിനനുസരിച്ച് മാർജിനുകളും മറ്റ് പ്രോപ്പർട്ടികളും ക്രമീകരിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ ടെസ്റ്റ് ചെയ്യലും ഡീബഗ് ചെയ്യലും

നിങ്ങളുടെ പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ അവ ടെസ്റ്റ് ചെയ്യുന്നത് നിർണായകമാണ്. പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ ടെസ്റ്റ് ചെയ്യുന്നതിനും ഡീബഗ് ചെയ്യുന്നതിനുമുള്ള ചില നുറുങ്ങുകൾ ഇതാ:

• പ്രിന്റ് പ്രിവ്യൂ ഫംഗ്ഷൻ ഉപയോഗിക്കുക: മിക്ക ബ്രൗസറുകൾക്കും ഒരു പ്രിന്റ് പ്രിവ്യൂ ഫംഗ്ഷൻ ഉണ്ട്, അത് നിങ്ങളുടെ പേജ് പ്രിന്റ് ചെയ്യുമ്പോൾ എങ്ങനെ കാണപ്പെടുമെന്ന് കാണാൻ അനുവദിക്കുന്നു. ലേഔട്ട് പ്രശ്നങ്ങൾ, പേജ് ബ്രേക്കുകൾ, മറ്റ് പ്രശ്നങ്ങൾ എന്നിവ പരിശോധിക്കാൻ ഈ ഫംഗ്ഷൻ ഉപയോഗിക്കുക.
• പിഡിഎഫിലേക്ക് പ്രിന്റ് ചെയ്യുക: നിങ്ങളുടെ പ്രിന്റഡ് ഔട്ട്പുട്ടിന്റെ ഒരു സ്ഥിരം റെക്കോർഡ് ഉണ്ടാക്കുന്നതിനുള്ള നല്ലൊരു മാർഗമാണ് പിഡിഎഫിലേക്ക് പ്രിന്റ് ചെയ്യുന്നത്. നിങ്ങളുടെ പ്രിന്റ് സ്റ്റൈൽഷീറ്റിന്റെ വ്യത്യസ്ത പതിപ്പുകൾ താരതമ്യം ചെയ്യുന്നതിന് ഇത് ഉപയോഗപ്രദമാകും.
• ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കുക: പ്രിന്റ് ചെയ്ത പേജിൽ പ്രയോഗിക്കുന്ന CSS റൂളുകൾ പരിശോധിക്കാൻ ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കാം. സ്റ്റൈലിംഗ് പ്രശ്നങ്ങൾ തിരിച്ചറിയാനും പരിഹരിക്കാനും ഇത് നിങ്ങളെ സഹായിക്കും.
• വ്യത്യസ്ത ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും ടെസ്റ്റ് ചെയ്യുക: പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ വ്യത്യസ്ത ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും വ്യത്യസ്തമായി പ്രവർത്തിച്ചേക്കാം. അവ സ്ഥിരമായി പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ വിവിധ ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും ടെസ്റ്റ് ചെയ്യുക.
• തേർഡ്-പാർട്ടി ടൂളുകൾ പരിഗണിക്കുക: പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ ഉണ്ടാക്കാനും ടെസ്റ്റ് ചെയ്യാനും സഹായിക്കുന്ന നിരവധി ഓൺലൈൻ ടൂളുകൾ ഉണ്ട്. ഈ ടൂളുകൾ പലപ്പോഴും ഓട്ടോമാറ്റിക് പേജ് ബ്രേക്കിംഗ്, മാർജിൻ ക്രമീകരണം പോലുള്ള സവിശേഷതകൾ വാഗ്ദാനം ചെയ്യുന്നു.

ഉപസംഹാരം

CSS @page റൂളും പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകളും നിങ്ങളുടെ വെബ് ഉള്ളടക്കത്തിന്റെ ഒപ്റ്റിമൈസ് ചെയ്ത പ്രിന്റ് പതിപ്പുകൾ ഉണ്ടാക്കുന്നതിനുള്ള ശക്തമായ ടൂളുകളാണ്. ഈ ടെക്നിക്കുകൾ മാസ്റ്റർ ചെയ്യുന്നതിലൂടെ, ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് അവർ നിങ്ങളുടെ ഉള്ളടക്കം ഒരു സ്ക്രീനിലാണോ പ്രിന്റിലാണോ കാണുന്നത് എന്നതിനെ ആശ്രയിക്കാതെ, തടസ്സമില്ലാത്തതും പ്രൊഫഷണലുമായ അനുഭവം നൽകാൻ നിങ്ങൾക്ക് കഴിയും. നിങ്ങളുടെ പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ രൂപകൽപ്പന ചെയ്യുമ്പോൾ പേപ്പർ വലുപ്പങ്ങൾ, ഭാഷാ വ്യതിയാനങ്ങൾ, അക്സെസ്സിബിലിറ്റി തുടങ്ങിയ ആഗോള ഘടകങ്ങൾ പരിഗണിക്കാൻ ഓർമ്മിക്കുക. ഈ ഗൈഡിൽ വിവരിച്ചിട്ടുള്ള മാർഗ്ഗനിർദ്ദേശങ്ങളും മികച്ച രീതികളും പിന്തുടരുന്നതിലൂടെ, എല്ലാ ഉപയോക്താക്കൾക്കുമായി നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ ഉപയോഗക്ഷമതയും അക്സെസ്സിബിലിറ്റിയും വർദ്ധിപ്പിക്കുന്ന പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകൾ നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയും. പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകളിലെ നിക്ഷേപം ഒരു മികച്ച ഉപയോക്തൃ അനുഭവത്തിനും നിങ്ങളുടെ ഉള്ളടക്കത്തിന്റെ വിശാലമായ അക്സെസ്സിബിലിറ്റിക്കുമുള്ള നിക്ഷേപമാണ്.

നന്നായി തയ്യാറാക്കിയ ഒരു പ്രിന്റ് സ്റ്റൈൽഷീറ്റിന്റെ ശക്തിയെ കുറച്ചുകാണരുത്! ഇത് ഉപയോക്തൃ അനുഭവം ഗണ്യമായി മെച്ചപ്പെടുത്താനും നിങ്ങളുടെ ഉള്ളടക്കം അവരുടെ ഇഷ്ടപ്പെട്ട വായനാ രീതി പരിഗണിക്കാതെ തന്നെ വിശാലമായ പ്രേക്ഷകർക്ക് ലഭ്യമാണെന്ന് ഉറപ്പാക്കാനും കഴിയും. @page റൂൾ സ്വീകരിക്കുക, ശാശ്വതമായ ഒരു മതിപ്പ് അവശേഷിപ്പിക്കുന്ന പ്രിന്റ്-ഫ്രണ്ട്ലി വെബ് പേജുകൾ സൃഷ്ടിക്കുക.